<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../js/pages/public.js"></script>


</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#addModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" onclick="deleteBrand()"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
                <div>
                    <form id="selectForm">
                        <input name="name" class="form-control" placeholder="品牌名称">
                        <input name="firstChar" class="form-control" placeholder="品牌首字母">
                        <input type="button" class="btn btn-default" value="搜索" onclick="getList()">
                    </form>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="brand"></tbody>
        </table>

        <!--数据列表/-->
        <p>
            <a onclick="getByPage(1)">首页</a>
            <a onclick="getByPage(2)">上一页</a>
            当前第<input id="dang" name="pageNum" size="1" value="1">页数据/每页<input id="gong" name="pageSize" size="1"
                                                                               value="5">条数据
            <a onclick="getByPage(3)">下一页</a>
            <a onclick="getByPage(4)">末页</a>
        </p>


    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->

<!-- 编辑窗口 -->
<form id="addfrom">
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">品牌增加</h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>品牌名称</td>
                            <td><input class="form-control" placeholder="品牌名称" name="name"></td>
                        </tr>
                        <tr>
                            <td>首字母</td>
                            <td><input class="form-control" placeholder="首字母" name="firstChar"></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">保存</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- 修改窗口 -->
<form id="updatefrom">
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="updatebrand">品牌修改</h3>
                </div>
                <div class="modal-body">
                    <div id="id" name="id"></div>
                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>品牌名称</td>
                            <td>
                                <div id="name" name="name"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>首字母</td>
                            <td>
                                <div id="firstChar" name="firstChar"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">保存
                    </button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    //token
    var token = window.localStorage.getItem("token")

    $(function () {
        getList()
    })

    //查询全部
    function getList() {
        var parms = $("#selectForm").serializeObject();
        //console.log(parms);
        var page = {
            "pageSize": $("#gong").val(),
            "pageNum": $("#dang").val(),
            "parm": parms
        }
        $.ajax({
            url: domain + "/brand/brandList",
            contentType: 'application/json;charset=utf-8',
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            dataType: "json",
            data: JSON.stringify(page),
            async: false,
            success: function (result) {
                var data = result.data.rows;
                var html = '';
                $(data).each(function (i, e) {
                    html += '	<tr>'
                    html += '	<td><input name="box" value="' + e.id + '" type="checkbox" ></td>'
                    html += '	<td>' + e.id + '</td>'
                    html += '	<td>' + e.name + '</td>'
                    html += '	<td>' + e.firstChar + '</td>'
                    html += '	<td className="text-center" align="center">'
                    html += '	<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toupdate(' + e.id + ')" >修改</button> '
                    html += '	<button type="button" class="btn bg-olive btn-xs" onclick="del(' + e.id + ')" >删除</button> '
                    html += '	</td>'
                    html += '	</tr>'
                })
                $("#brand").html(html)
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }

    //分页
    function getByPage(id) {
        var dang = $("#dang").val();
        var gong = $("#gong").val();
        if (id == 1) {//首页
            if (dang == 1) {
                return;
            } else {
                $("#dang").val(1);
            }
        } else if (id == 2) {//上一页
            if (dang == 1) {
                return;
            } else {
                $("#dang").val(parseInt(dang) - 1);
            }
        } else if (id == 3) {//下一页
            if (dang == gong) {
                return;
            } else {
                $("#dang").val(parseInt(dang) + 1);
            }
        } else if (id == 4) {//末页
            if (dang == gong) {
                return;
            } else {
                $("#dang").val(gong);
            }
        }
        getList();
    }

    //增加
    function add() {
        var parms = $("#addfrom").serializeObject();
        $.ajax({
            url: domain + "/brand/add",
            contentType: 'application/json;charset=utf-8',
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            dataType: "json",
            data: JSON.stringify(parms),
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert("增加成功")
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }

    //回显
    function toupdate(id) {
        $.ajax({
            url: domain + "/brand/selectById?id=" + id,
            contentType: 'application/json;charset=utf-8',
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            dataType: "json",
            async: false,
            success: function (result) {
                var data = result.data;
                var id = '<input type="hidden" name="id" value="' + data.id + '">';
                $("#id").html(id)
                var name = '<input class="form-control" placeholder="品牌名称" name="name" value="' + data.name + '">';
                $("#name").html(name)
                var firstChar = '<input class="form-control" placeholder="首字母" name="firstChar" value="' + data.firstChar + '">';
                $("#firstChar").html(firstChar)
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }

    //修改
    function update() {
        var parms = $("#updatefrom").serializeObject();
        // console.log(parms);
        $.ajax({
            url: domain + "/brand/update",
            contentType: 'application/json;charset=utf-8',
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "put",
            dataType: "json",
            data: JSON.stringify(parms),
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert("修改成功")
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }

    //删除
    function del(id) {
        $.ajax({
            url: domain + "/brand/delete?id=" + id,
            contentType: 'application/json;charset=utf-8',
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "delete",
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert("删除成功")
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }

    //批量删除
    function deleteBrand() {
        var ids = []  //定义一个数组
        $("[type=checkbox]").each(function (i, e) {   //获取所有复选框的value,循环
            if ($(e).prop("checked")) {   //判断是否被选中
                ids.push($(e).val())  //选中就添加到数组中
            }
        })
        $.ajax({
            url: domain + "/brand/deleteBrand",
            contentType: 'application/json;charset=utf-8',
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "delete",
            dataType: "json",
            data: JSON.stringify(ids),
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert("删除成功")
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统出错!")
            }
        })
    }

</script>

</body>
</html>